<template>
  <div class="block" style="float: right">
    <label style="font-size: 20px; color: #000000;">筛选：</label>
    <el-date-picker
      v-model="dateDuring"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      @change="timeChange">
    </el-date-picker>
    <el-button style="margin: 0 10px" icon="el-icon-refresh" type="primary" @click="selectorRefresh"/>
  </div>
</template>

<script>
export default {
  name: 'selector',
  data () {
    return {
      dateDuring: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  // inject: ['reloadPage', 'getData', 'getDateDuring', 'dateDuring', 'refresh'],
  methods: {
    timeChange () {
      console.log('selector 组件时间改变')
      this.currentPage = 1
      // this.getDateDuring(this.dateDuring)
      console.log('选择时间段为：', this.dateDuring)
      // this.getData()
      console.log('即将通过bus发送timeChange事件')
      this.$bus.$emit('timeChange', this.dateDuring)
    },
    selectorRefresh () {
      // this.refresh()
      this.dateDuring = null
      console.log('selector成功调用日期刷新')
      this.$bus.$emit('refresh', this.dateDuring)
    }
  }
}
</script>

<style scoped>
.block{
  margin-top: 1vh;
  margin-right: 1vw;
}

</style>
